<template>
	<view class="apply-repair">
		<view class="form">
			<view class="form-cell flex-center-between" @click="pageTo('/pages/index/address')">
				<text class="form-cell-name">地址</text>
				<view class="select-address-info" v-if="contactAddress">
					<view class="select-address-info-address text-overflow-two">
						{{contactAddress}}
					</view>
				</view>
				<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">联系人</text>
				<input
					class="form-cell-value"
					type="text"
					:value="contactName"
					data-name="contactName"
					placeholder="请输入联系人"
					@input="inputChange" />
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">联系电话</text>
				<input
					class="form-cell-value"
					type="number"
					:value="contactPhone"
					data-name="contactPhone"
					placeholder="请输入联系电话"
					@input="inputChange" />
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">故障设备</text>
				<picker
					class="flex-center"
					@change="bindPickerDeviceChange"
					:value="curDevice"
					:range="deviceList"
					:range-key="'AdapterID'">
					<text>{{deviceList[curDevice].AdapterID}}</text>
					<uni-icon type="arrowright" size="18" color="#666"></uni-icon>
				</picker>
			</view>
			<view class="form-cell flex-center-between">
				<text class="form-cell-name">故障类型</text>
				<picker
					class="flex-center"
					@change="bindPickerChange"
					:value="cur"
					:range="list">
					<text>{{list[cur]}}</text>
					<uni-icon type="arrowright" size="18" color="#666"></uni-icon>
				</picker>
			</view>
		</view>
		
		<comCall></comCall>
		<view class="submit-btn">
			<button @click="submit">确定</button>
		</view>
	</view>
</template>

<script>
	import comCall from "./Call.vue"
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon,
			comCall
		},
		data() {
			return {
				contactName: '',
				contactPhone: '',
				contactAddress: '',
				curDevice: 0,
				deviceList: [],
				cur: 0,
				list: ['机器提示故障', '机器离线', '机器无法开机', '出水量变小']
			}
		},
		onLoad() {
			this.getDeviceList()
		},
		onShow() {
			this.getSelectedAddress()
		},
		methods: {
			/**
			 * 获取设备列表
			 */
			async getDeviceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/equipment/work_order',
					data: {}
				})
				if (res.status === 1) {
					this.deviceList = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 提交
			 */
			async submit() {
				let res = await this.$http.request({
					url: '/api/work_order/add',
					method: 'post',
					data: {
						order_no: this.deviceList[this.curDevice].RepairOrderCode, // 报修订单号[String][必填]
						LeaseDetailsID: String(this.deviceList[this.curDevice].LeaseDetailsID), // 租赁订单明细ID[String][必填]
						AdapterID: this.deviceList[this.curDevice].AdapterID, // 适配器ID[String][必填]
						RepairClientCode: String(uni.getStorageSync('USER_INFO').user_id), // 报修客户编号[String][必填]
						RepairClientName: uni.getStorageSync('USER_INFO').username, // 报修客户名称[String][必填]
						ContactName: this.contactName, // 联系人姓名[String][必填]
						ContactPhone: this.contactPhone, // 联系电话[String][必填]
						ContactAddress: this.contactAddress, // 联系地址[String][必填]
						RepairState: 0, // 报修状态（默认0）[Int][必填]
						RepairLevel: 0, // 报修级别[Int][必填]
						FaultType: 2, // 故障类型[Int][必填]
						// OrderTime: new Date().format("yyyy-MM-dd hh:mm:ss.S"), // 报修时间[DateTime][必填]
						Remark: this.list[this.cur], // 故障说明[String][非必填]
					}
				});
				if (res.status === 1) {
					uni.navigateBack()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取地址数据
			 */
			getSelectedAddress() {
				uni.getStorage({
					key: 'ADDRESS',
					success: res => {
						this.contactAddress = res.data.addressArea;
						this.contactName = res.data.addressName;
						this.contactPhone = res.data.addressPhone;
					},
					fail: res => {
						this.contactAddress = '';
						this.contactName = '';
						this.contactPhone = '';
					}
				})
			},
			bindPickerChange(e) {
				this.cur = e.target.value
			},
			bindPickerDeviceChange(e) {
				this.curDevice = e.target.value
			},
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.apply-repair{
		padding-top: 20rpx;
		.form{
			padding: 0 30rpx;
			background: $uni-bg-color;
			&-cell{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&:last-child{
					border-bottom: none;
				}
				&-name{
					width: 200rpx;
					color: $uni-text-color-grey2;
				}
				&-value{
					text-align: right;
				}
			}
		}
		.after-sale-phone{
			margin-top: 100rpx;
			text-align: center;
			.tit{
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm1;
			}
			.con{
				font-size: $uni-font-size-sm2;
			}
		}
		.submit-btn{
			padding: 0 30rpx;
		}
	}
		
</style>